<template>
  <el-dialog
    :show-close="false"
    :append-to-body="true"
    :before-close="dialogClose"
    :visible.sync="visible"
    class="small-common-dialog-size info-sync-container">
    <SectionTitle title="同步账号信息" style="margin-bottom: 16px;" />
    <el-form
      ref="infoSyncFormRef"
      :model="formData"
      :rules="rules"
      class="add-form"
      label-width="68px"
      label-position="left"
    >
      <el-form-item label="平台:" class="read-only-item">
        <ToolTip :content="formData.platform" />
      </el-form-item>
      <el-form-item label="账号ID:" class="read-only-item">
        <ToolTip :content="formData.accountId" />
      </el-form-item>
      <el-form-item label="账号名称:" class="read-only-item" style="margin-bottom: 12px">
        <ToolTip :content="formData.accountName" />
      </el-form-item>
      <el-form-item label="粉丝量" prop="fansNum">
        <el-input
          v-model="formData.fansNum"
          class="width240"
          size="small"
          placeholder="请输入"
          type="text"
          @input="numInputChange" />
      </el-form-item>
      <el-form-item label="链接" prop="link">
        <el-input v-model="formData.link" :maxlength="200" size="small" class="width240" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="标签" prop="tag">
        <TagSelect
          v-model="formData.tag"
          :module-type="TAG_MODULES.RESOURCE"
          :platform="formData.platformId"
          class="width240" />
      </el-form-item>
    </el-form>
    <div class="mt10 center">
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button class="btn ml20 cancel-btn-style" plain size="small" @click="dialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SectionTitle from '@/components/Title';
import TagSelect from '@/components/Common/tagSelect';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { TAG_MODULES } from '@/utils/const';

export default {
  name: 'AccountInfoSyncDialog',
  components: {
    SectionTitle,
    TagSelect,
    selectWithoutHttp
  },
  data() {
    const tagValidator = () => {
      return (rule, value, callback) => {
        if (!Array.isArray(this.formData.tag) || !this.formData.tag.length) {
          callback(new Error('请选择标签'));
        } else if (this.formData.tag.length > 3) {
          callback(new Error('标签最多可选择3个'));
        } else {
          callback();
        }
      };
    };
    return {
      TAG_MODULES,
      visible: false,
      formData: {
        platform: '',
        accountId: '',
        link: '',
        accountName: '',
        fansNum: null,
        orderPreference: '',
        tag: null
      },
      rules: {
        'fansNum': [{ required: true, message: '请输入粉丝量', trigger: 'blur' }],
        'link': [{ required: true, message: '请输入接单偏好', trigger: 'blur' }],
        'tag': [{ required: true, trigger: 'change', validator: tagValidator() }]
      }
    };
  },
  created() {
  },
  methods: {
    numInputChange(text) {
      let num;
      num = text.replace(/[^\d.]|\.|^0/g, ''); // 只允许输入正整数
      num = num === '' ? null : Math.min(Number(num), 999999999);
      this.formData.fansNum = num;
    },
    initDialog(data) {
      this.formData = data;
      this.visible = true;
    },
    dialogClose() {
      this.visible = false;
      this.$refs['infoSyncFormRef'].resetFields();
    },
    infoSyncConfirm() {
      this.$emit('infoSync', _.cloneDeep(this.formData));
      this.dialogClose();
    },
    handleSubmit: _.debounce(function() {
      this.$refs['infoSyncFormRef'].validate().then(() => {
        this.infoSyncConfirm();
      }).catch(() => {
        this.$message.error('请正确填写数据');
      });
    }, 500)
  }
};
</script>
<style lang="scss" scoped>
.info-sync-container {
  .width240 {
    width: 240px;
    &::v-deep {
      .el-select {
        width: 240px;
      }
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .center{
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
  .add-form {
    margin: 16px 0 24px;
  }
  .read-only-item {
    margin-bottom: 0;
    &::v-deep {
      .el-form-item__label {
        color: #999;
        font-size: 14px;
        padding-right: 0;
      }
      .el-form-item__content {
        display: flex;
      }
    }
  }
}
</style>
